<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 600px;
            border:1px solid;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
    <script>
        // 利用方块画身体；
        // 定义一个方块类 生产方块

        function Rect(x,y,color){
            // 方块的x坐标
            this.x = x;
            this.y = y; //方块的y坐标
            this.color = color;  //方块的颜色 
            this.createRect(); //生成方块的方法
        }

        Rect.prototype.createRect = function(){
            this.rectEle = document.createElement("div"); // 创建元素 和方块对象的rectEle绑定
            this.rectEle.style.width = "50px";
            this.rectEle.style.height = "50px";
            this.rectEle.style.position = "absolute";
            this.rectEle.style.left = this.x + "px";
            this.rectEle.style.top = this.y + "px";
            this.rectEle.style.background = this.color;  // 设置方块的颜色
            this.rectEle.style.border = "1px solid";
        }

        // let rect1 = new Rect(0,0,"blue");
        // let rect2 = new Rect(50,0,"blue");
        // console.log(rect1);
        // let containerEle = document.querySelector(".container");
        // containerEle.appendChild(rect1.rectEle);
        // containerEle.appendChild(rect2.rectEle);

        // 创建蛇类；
        function Snake(containerEle){
            this.containerEle = containerEle; // 容器 蛇的身体应该放在哪个容器里面 我们这里就是dom中的container
            this.body = [];  //蛇的身体  ，由多少个rect构成的；
            this.createBody(); //创建蛇的身体 创建完成后this.body里就有内容了；
            console.log(this.body);
            this.renderDom();  //把每一个 rect中的rectEle元素 添加到 dom中；
        }

        Snake.prototype.createBody = function(){
            for(let i=0;i<5;i++){  //循环生成方块组成蛇的身体
                let rect;
                if(i==4){
                    rect = new Rect(i*50,0,"red"); //如果是蛇头设置颜色为红色
                }else{
                    rect = new Rect(i*50,0,"blue");  //蛇身体设置颜色蓝色
                }
               
                this.body.push(rect);  //把蛇身体加到body数组中
            }
        }

        // 把蛇渲染到视图
        Snake.prototype.renderDom = function(){
            this.body.forEach(rect=>{  //循环把蛇身体中的rectEle添加到containerEle里面
                this.containerEle.appendChild(rect.rectEle);
            })
        }
        let containerEle = document.querySelector(".container");
        let snake = new Snake(containerEle);  //实例化调用蛇类；同时也实例化了 rect




    </script>
</body>
</html>